<template>
  <div class="home">
    <NavBar></NavBar>
    <div class="content">
      <div class="left">
        <div class="posts-box">
          <div class="postsTitle">{{ article.title }}</div>
          <div class="user-footer">
            <span>
              <img
                style="width: 1em"
                :src="article.avatar"
                alt="云客栈"
              />&nbsp;{{ article.nickname }}
            </span>
            <span class="time">
              <el-icon><Clock /></el-icon> {{ article.createAt }}
            </span>
            <span class="view"
              ><el-icon><View /></el-icon> {{ article.views }}</span
            >
            <span class="like"
              ><el-icon><Star /></el-icon>{{ article.approvals }}</span
            >
            <span class="comments"
              ><el-icon><ChatRound /></el-icon>{{ article.comments }}
            </span>
            <span class="tags"
              ><ul>
                <li v-for="(item, index) in article.tags" :key="index">
                  <el-icon><PriceTag /></el-icon>{{ item.name }}&nbsp;
                </li>
              </ul></span
            >

            <span class="user-footer-right" v-if="showBtn">
              <el-link icon="Close" @click="deleteArticle">删除</el-link>
              &nbsp;
              <el-link icon="Edit" @click="editArticle">编辑</el-link>
            </span>
          </div>

          <div v-html="article.htmlContent"></div>
          <div class="article-footer">
            <el-icon :size="20"><Star /></el-icon>
          </div>

          <el-divider />
          <Comments :show-btn="showBtn"></Comments>
        </div>
      </div>
      <div class="right">
        <Btn></Btn>

        <RecentQuestion></RecentQuestion>

        <CommonTags></CommonTags>
      </div>
    </div>
  </div>
</template>
  
  <script>
import NavBar from "@/components/NavBar.vue";
import CommonTags from "@/components/CommonTags.vue";
import RecentQuestion from "@/components/RecentQuestion.vue";
import Comments from "@/components/Comments.vue";
import Btn from "@/components/Btn.vue";
// 导入通知消息框
import { ElNotification } from "element-plus";

// 导入请求api
import { $postComment } from "../api/comment";
import { $getArticleDetail, $deleteArticle, $getArticle } from "../api/article";

//返回Article全局对象
import { editedArticle } from "../store";

export default {
  data() {
    return {
      showBtn: true,
      comments: [],
      comment: {
        postsId: "1",
        content: "",
      },
      article: {},
      content: "",
      activeId: 0,
      tags: [],

      postId: {},
      category: "",
    };
  },
  mounted() {
    this.loadData();
  },
  methods: {
    //加载文章详情
    async loadData() {
      //评论区关联文章ID
      this.comment.postsId = this.$route.query.id;
      this.postId = this.$route.query.id;

      this.category = this.$route.query.category;

      let { data } = await $getArticleDetail({ id: this.postId });
      this.article = data;

      //判断是否为文章作者是否为当前用户
      if (sessionStorage.getItem("user") !== null) {
        if (
          JSON.parse(sessionStorage.getItem("user")).userId ===
          this.article.authorId
        ) {
          this.showBtn = true;
          return;
        }
      }
      this.showBtn = false;
    },
    //删除文章
    async deleteArticle() {
      let { data, code } = await $deleteArticle({ id: this.postId });
      if (code) {
        ElNotification({
          title: "通知",
          message: data,
          type: "success",
        });
      }
      this.$router.push({ path: "/" });
    },
    //编辑文章
    async editArticle() {
      //注册文章全局对象
      let useArticle = editedArticle();

      //查询文章信息
      let { data } = await $getArticle({ id: this.postId });

      useArticle.setArticle(data);

      let category = useArticle.article.category;
      if (category === "FAQ") {
        this.$router.push({ path: "/faq/editor" });
      }
      if (this.category === "ARTICLE") {
        this.$router.push({ path: "/article/editor" });
      }
    },
    //提交评论
    async submit() {
      let { data, code } = await $postComment(this.comment);
    },
  },
  components: {
    NavBar,
    CommonTags,
    RecentQuestion,
    Btn,
    Comments,
  },
};
</script >
  
  <script setup>
</script>
  <style lang="less" scoped>
.home {
  // height: 800px;
  // height: 100vh;

  background-color: #f3f3f2;
  .content {
    width: 1200px;
    margin: 0 auto;
    height: 100vh;
    padding: 25px;
    .left {
      width: 875px;
      height: auto;
      float: left;
      background-color: #ffffff;
      .posts-box {
        text-align: left;
        padding: 20px;
        .postsTitle {
          font-size: 30px;
          margin-bottom: 20px;
          font-weight: 600;
        }
        .user-footer {
          margin-top: 8px;
          font-size: smaller;
          color: #b7b5b5;
          margin-bottom: 20px;
          span:nth-child(n + 2) {
            margin-left: 35px;
          }
          .tags {
            ul {
              list-style: none;
              margin: 0;
              padding: 0;
              display: inline;
              li {
                display: inline;
              }
            }
          }
          .user-footer-right {
            float: right;
          }
        }
        .article-footer {
          text-align: right;
        }
        .comments {
          margin: 10px 0;
        }
      }
    }
    .right {
      width: 300px;
      float: right;
      height: 400px;
    }
  }
}
</style>
  <style>
.t-25 {
  margin-top: 25px;
}
.t-10 {
  margin-top: 10px;
}
.l-8 {
  margin-left: 8px;
}
.f-l {
  font-size: large;
}
.demo-tabs > .el-tabs__content {
  padding: 0px;
  color: #6b778c;
  font-size: 32px;
  font-weight: 600;
}
.el-divider--horizontal {
  margin: 10px 0;
}
.items :hover {
  background-color: #f8f9fa;
}
.home:after {
  content: "";
  display: block;
  clear: both;
}
</style>